<template>
	<view class="container bg-grey">
		<view class="header pad30 relative">
			<navigator url='/pages/setting/my-profile' class="setting-icon absolute">
				<u-icon name="setting-fill" size="50" />
			</navigator>
			<view class="flex a-c pad20" @click="handleCheckLogin">
				<u-avatar :src="info.avatar" size='140' />
				<view class="font40 padh30 bold">
					{{ info.nickname || "现在登录" }}
				</view>
			</view>
		</view>
		<view class="padh30">
			<view class="bg-white radius20 oh">
				<u-cell-item title="我的订单" value="全部" @click="$go2(`/pages/main/order/list`)" />
				<u-grid col="5" :border="false">
					<u-grid-item v-for="(item, index) in orderStatus" :key="index"
						@click="$go2(`/pages/main/order/list?current=${item.id}`)">
						<u-badge v-if="item.count" class="car-num" :count="item.count" type="error" :offset="[16, 35]">
						</u-badge>
						<u-icon :name="item.icon" :size="48"></u-icon>
						<view class="font24" style="margin-top: 20rpx;">{{ item.name }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<u-gap height="40"></u-gap>
			<view class="bg-white radius20 oh">
				<u-cell-item title="我的功能" :arrow="false" />
				<u-grid col="4" :border="false">
					<u-grid-item @click="$go2('/pages/sales/discount-coupon/discount-coupon')">
						<u-icon name="coupon" :size="70" />
						<view class=" marv20">优惠券</view>
					</u-grid-item>
					<u-grid-item @click="$go2('/pages/main/address/list')">
						<u-icon name="map" :size="70" />
						<view class="marv20">地址</view>
					</u-grid-item>
					<u-grid-item @click="$refs.kefuRef.show()">
						<u-icon name="server-man" :size="70" />
						<view class="marv20">客服</view>
					</u-grid-item>
					<u-grid-item @click="$go2('/pages/setting/my-profile')">
						<u-icon name="setting" :size="70" />
						<view class="marv20">设置</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="t-c c-d padv40 font24"> PROVIDE BY SHENDU STUDIO 2022 </view>
		<service-modal ref='kefuRef' />
	</view>
</template>

<script>
	import { mapActions, mapState } from "vuex";
	import _ from 'love-u'
	export default {
		data() {
			return {
				info: {},
				orderStatus: [{
						id: 1,
						name: "待付款",
						icon: "red-packet",
						code: "DFK",
					},
					{
						id: 2,
						name: "待确认",
						icon: "file-text",
						code: "DSH",
					},
					{
						id: 3,
						name: "带上门",
						icon: "order",
						code: "DFH",
					},
					{
						id: 4,
						name: "服务中",
						icon: "car",
						code: "DQS",
					},
					{
						id: 5,
						name: "已完成",
						icon: "checkbox-mark",
						code: "YWC",
					},
				],
			};
		},

		computed: {
			...mapState(["tabbarList"]),
		},
		methods: {
			// ...mapActions(["getCount"]),
			handleCheckLogin() {
				if (_.isEmptyObj(this.info)) this.$redirect2Login();
			},
			async getInfo() {
				let { success, data } = await this.$get("/user/getUserInfo");
				if (success) this.info = data;
			},
			async getOrderInfos() {
				// let { data } = await this.$get("/order/my-statisic-count");
				// if (data) {
				// 	//todo此处是垃圾代码
				// 	this.orderStatus.forEach((item, index) => {
				// 		Object.keys(data).forEach((key) => {
				// 			if (key === item.code) item.count = data[key];
				// 		});
				// 	});
				// }
			},
		},
		onShow() {
			if (this.$checkLogin()) {
				this.getInfo();
				this.getOrderInfos();
				// this.getCount();
			}
		},
	};
</script>

<style scoped lang="scss">
	/deep/ {
		.u-cell_title {
			color: #303133;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.setting-icon {
		right: 30rpx;
		top: 30rpx
	}
</style>
